<template>
	<view class="diy-coupon"
		:style="'margin-top:' + componentData.data.marginTop * 2 + 'rpx;margin-bottom:' + componentData.data.marginBottom*2 + 'rpx; padding: 0 ' + componentData.data.marginLeftRight*2 + 'rpx;'">

		<view v-if="componentData.data.list.length > 0" class="containers" :class="componentData.data.layout"
			:style="'background-color:' + componentData.data.bgColor + ';padding: ' + componentData.data.paddingTopBottom*2 + 'rpx ' + componentData.data.paddingLeftRight*2 + 'rpx;'">
			<block v-for="(item,index) in componentData.data.list" :key="index" v-if="isWeChat || item.type==1">
				<view class="coupon" :key="index" :style="'background:' + componentData.data.couponBg">
					<view class="flex center between flex-content">
						<view class="flex center between flex-left">
							<view class="flex coupon-info center bottom">
								<view class="coupon-info-text" v-if="getcouponType(item,1)"
									:style="'line-height:1;color:' + componentData.data.discountTagConfig.fontColor + ';font-size:' + componentData.data.discountTagConfig.fontSize*2 + 'rpx;font-weight:' + componentData.data.discountTagConfig.fontWeight + ';'">
									￥
								</view>
								<view class="coupon-info-text coupon-info-text-fee"
									:style="'line-height:1;color:' + componentData.data.discountConfig.fontColor +' ;font-size:' + componentData.data.discountConfig.fontSize*2 + 'rpx;font-weight:' + componentData.data.discountConfig.fontWeight + ';'">
									{{ getInfoText(item) }}
								</view>
								<view v-if="getcouponType(item,2)" class="coupon-info-text"
									:style="'line-height:1;color:' + componentData.data.discountTagConfig.fontColor + ';font-size:' + componentData.data.discountTagConfig.fontSize*2  + 'rpx;font-weight:' + componentData.data.discountTagConfig.fontWeight+ ';'">
									折
								</view>
							</view>
							<view class="coupon-content" :style="'color: ' + componentData.data.couponText">
								<view class="coupon-name"
									:style="'font-size:' + componentData.data.couponNameFontSize*2 + 'rpx;'">
									{{ item.name }}
								</view>
								<view class="coupon-type"
									:style="'font-size:' + componentData.data.couponTypeFontSize*2 + 'rpx;'">
									{{ couponTypeText(item.type) }}
								</view>
							</view>
						</view>
						<view class="flex center">
							<view class="coupon-btn flex"
								:style="'background:' + componentData.data.btnBg + ';color:' + componentData.data.btnText + ';flex-direction:row;flex-wrap:wrap;'"
								@click="toCoupons(item.coupon_id,item.coupon_type)">
								<view style="text-align: center; flex: 1; white-space: nowrap">立即</view>
								<view style="text-align: center; flex: 1; white-space: nowrap">领取</view>
							</view>
						</view>
					</view>
				</view>
			</block>

		</view>

		<!-- #ifdef MP-ALIPAY -->
		<mkt v-if="canIUse && cityCode && componentData.data.type!=1" mode="AUTOMATIC" boothCode="MERCHANT_SELF_TINYAPP"
			:cityCode="cityCode" version="2"></mkt>

		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isLogin: false,
				args: {
					withCredentials: true,
					lang: 'zh_CN'
				},
				openid: '',
				//#ifdef MP-ALIPAY
				canIUse: my.canIUse('mkt'),
				isWeChat: 0,
				//#endif
				//#ifdef MP-WEIXIN
				isWeChat: 1,
				//#endif
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			componentData: {
				type: Object,
				default: {}
			}
		},
		beforeMount() {},

		mounted() {
			console.log("优惠券-", this.componentData);
		},
		computed: {
			couponBg(data) {
				if (data.componentData) {
					return `linear-gradient(135deg, transparent 60rpx, ${data.componentData.data.couponBg} 60rpx)`;
				}
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			receiveCoupon: function(id) {
				let _this = this;
				uni.showLoading({
					title: '领取中',
					// #ifndef MP-ALIPAY
					mask: true,
					// #endif
				})
				let couponType = this.componentData['type'] ? this.componentData['type'] : 1;
			},
			getcouponType(item, num) {
				if (!item.info) {
					return '';
				}

				if (num === 2) {
					// 折扣
					return [1, 3, 101, 103].indexOf(item.type) + 1;
				} else {
					// 满减
					return [2, 4, 102, 104].indexOf(item.type) + 1;
				}
			},
			getInfoText(item) {
				if (!item.info) {
					return '';
				}
				if (this.getcouponType(item, 2)) {
					return (item.info.coupon_info.discount_info.discount_num / 1000).toFixed(1);
				}
				return item.info.coupon_info.discount_info.discount_fee;
			},
			couponTypeText(val) {
				var text = {
					'1': '商品条件折扣券',
					'2': '商品满减券',
					'3': '商品统一折扣券',
					'4': '商品直减券',
					'101': '店铺条件折扣券',
					'102': '店铺满减券',
					'103': '店铺统一折扣券',
					'104': '店铺直减券'
				}
				return text[val + '']
			},
			callback(e) {
				const myEventDetail = {
					...e.detail
				}; // console.log('diy-img-callback',e,myEventDetail);

				this.$emit('callback', myEventDetail);
			},
			async toCoupons(id, type) {
				if (type == 1) {
					var res = await this.$request('SmallProgramApi/Coupon/collar', {
						coupon_id: id,
						couponType: type
					});
					if (res.status == 1) {
						uni.showToast({
							title: '领取成功',
							// #ifndef MP-ALIPAY
							duration: 1000,
							// #endif
							mask: false,
						})
					} else {
						uni.showToast({
							title: '领取失败：' + res.msg,
							// #ifndef MP-ALIPAY
							duration: 1000,
							// #endif
							mask: false,
							icon: 'none'
						})

					}
				} else if (type == 2) {

					uni.navigateTo({
						url: "/pages/index/merCouponDetail/merCouponDetail?id=" + id + '&type=1' +
							'&isget=0 &genre=' + 3
					})
					return;
					let uid = getApp().globalData.XcxData.userInfo.uid;
					let backPage = getCurrentPages();
					let page = (backPage[backPage.length - 1]).route.toString()
					getApp().globalData.XcxData.isvEntryVoucher = true
					uni.navigateTo({
						url: '/pages/index/web/web?url=' + this.webURL + '&uid=' + uid + '&page=' + page +
							'&user_type=' + type
					})
				} else if (type == 3) {
					uni.navigateTo({
						url: "/pages/index/merCouponDetail/merCouponDetail?id=" + id + '&type=1' +
							'&isget=0 &genre=' + 4
					})
					return;
					var res = await this.$request('SmallProgramApi/PayCoupon/receiveCoupon', {
						id: id
					});
					if (res.status == 1) {
						uni.showToast({
							title: '领取成功',
							icon: 'success',
							// #ifndef MP-ALIPAY
							duration: 2000,
							// #endif
						})
						_this.$forceUpdate()
						_this.update = true;

					} else {
						uni.showToast({
							title: '领取失败：' + res.message,
							// #ifndef MP-ALIPAY
							duration: 1000,
							// #endif
							mask: false,
							icon: 'none'
						})
					}
				}
			}
		}
	};
</script>
<style>
	@import './diy-coupon.css';
</style>